<html>
  <head>
    <title>HTML 文档结构</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body style="color: darkorchid">
    <div class="main">
      <div class="row">
        <input class="input" type="text" id="inputtext" onkeyup="keyup(event)"/>
        <input type="button" name="bt" value="确认1" onclick="handleClick(event)" />
        <input type="button" name="bt" id="button2" value="确认2"  />
      </div>
      <div id="todogroup">
           <!-- <div>吃饭<button type="button">删除</button></div>
           <div>睡觉</div> -->
           <!--这里面 todo项-->
      </div>
      <div id="xx" onmouseenter="enter('xx')" onmouseleave="leave('xx')">
      

      </div>

      <!-- <span style="color: blue"
        >asd&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;asd</span> -->
    </div>
  </body>
  <script lang="javascript">

    var intCnt = 0 ;

    function init(){
     //   setTimeout(function(){
     //            alert("hhh");
     //   }, 2000);
     //    console.log("xxx");
       document.getElementById("button2").onclick = handleClick;
     //    console.log('xxxxxx');
    }

    function keyup(e){
       console.log(e);

       if(e.keyCode==13){
           handleClick();
       }

    }

    function handleClick(e){
       console.log('handleClick');   
       console.log(e);
      
       var temp = getValue();
       
    //    document.getElementById("todogroup").innerHTML+="<div>"+temp+"</div>";
    // var div = document.createElement('div');
    // div.innerText = temp;
    // document.getElementById("todogroup").append(div);
    // 1.追加44行一样的一个div
    // 把我input输入框内的数据清空
    document.getElementById("todogroup").innerHTML += "<div class='item' id='todo"
    + intCnt + "'><input type='checkbox' name='todocheck'><div class='item-value'>"
    + temp + "</div><button class='item-del' type='button' onclick='deletByIndex("
    + intCnt + ")'>删除</button></div>";
    document.getElementById("inputtext").value = "";
    intCnt++;
    // document.getElementById("todogroup").append("<div>"+temp+"</div>");

    //    document.getElementsByClassName("bt")
    // //   document.getElementsByClassName("main")[0].style="background-color: #333333;";
    //   document.getElementsByClassName("main")[0].style="background-color: rgb(255,212,244);";
    }

    function getValue(){
          var temp = document.getElementById("inputtext");
          console.log(temp.value);

          return temp.value;
    }

    function deletByIndex(index){
        document.getElementById("todo"+index).remove();
    }

    function enter(id){
      document.getElementById(id).style='background-color:#3e3e3e'
    }

    function leave(id){
      document.getElementById(id).style='background-color:#FFFFFF'
    }

    init();
  </script>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .main {
      /* background-color:aliceblue; */
      padding: 8px;
      border: 1px solid #333333;  
      /* height: 200px; */
      border-radius: 8px;
    }

    .row {
      display: flex;
    }

    .item{
      display: flex;
      align-items: center;
      margin: 6px;
      padding: 3px;
      
      border-radius: 3px;
      background-color: #fff;
    }
 
    .item:hover{
      background-color: #dbdbdb;
      transform: scale(1.2);
    }

    .item-value{
      flex-grow: 1;
      color: #000;
    }

    .item-del{
      color: aliceblue;
      background-color: red;
      border: 0px;
      opacity: 0;
      border-radius: 4px;
    }

    .item:hover .item-del{
      opacity: 1;
    }

    .input{
      padding: 8px;
      outline: none;
      border: 2px solid #b1afaf;
    }

    .input:focus{
      box-shadow: 0px 0px 10px #3762d9;
      border: 2px solid #3762d9;
    }

  </style>
</html>
